<template>
  <div class="file-list">
    <div :class="item.fileId == currentFileId ? ['list-file-item-con', 'active'] : ['list-file-item-con']"
         @click="showFile(item)" v-for="(item,index)  in fileList" :index="item.fileId.toString()"
         :key="index">
      <div class="ornament"></div>
      <div class="img-con">
        <img :src="getFileIconByFileName(item.fileName)">
      </div>
      <el-tooltip effect="dark" :content="item.fileName" placement="top">
        <div class="txt">
          {{ item.fileName }}
        </div>
      </el-tooltip>

      <div v-if="showClose" class="del-icon" @click.stop="delFile(item)">
        <i class="el-icon-close"></i>
      </div>
    </div>
  </div>
</template>

<script>
import {getFileIconByFileName} from "@/utils/fileRightConfig";
import {showTypeConfig} from "@/utils/fileRightConfig";
import {isArr} from "@/utils/arrayUtil";
import {downFileByFilePath} from "@/utils/exportFile";
import {findDocLastFileById} from "@/api/exportFile";

export default {
  props: {
    fileList: {
      type: Array
    },
    showClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      firstFlag: true,
      currentFileId: '',
      currentItem: {},
    }
  },

  methods: {
    getFileIconByFileName,
    delFile(item) {
      this.$emit('delFile', item)
    },
    showFile(file) {
      if (!file) return;
      let {docType} = file
      if (showTypeConfig.some(type => type == docType)) {
        this.currentFileId = file.id
        this.$emit('showFile', file)
      } else {
        this.downFile(file)
      }
      this.firstFlag = false
    },
    downFile(file) {
      this.$modal.confirm(`是否确认下载${file.fileName}?`).then(function () {
        downFileByFilePath(file.fileUrl, file.fileName)
      });
    }
  }
}
</script>

<style scoped lang="scss">

.file-list {
  width: 100%;
  margin-top: 10px;

  .list-file-item-con {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 2px;
    height: 38px;
    cursor: pointer;

    .img-con {
      margin: 0 18px 0 13px;
      display: flex;
      align-items: center;

      img {
        width: 16px;
        height: 16px;
      }
    }


    .del-icon {
      cursor: pointer;
      visibility: hidden;
      margin-right: 12px;
    }

    .txt {
      margin-right: 20px;
      padding: 5px 0;
      font-size: 14px;
      font-weight: 400;
      color: rgba(48, 49, 51, 1);
      text-align: left;
      vertical-align: top;
      flex: 1;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 100%;
      line-height: 38px;
    }

    &:hover, &.active {
      border-left: 2px solid rgba(0, 110, 255, 1);
      padding-left: 0;
      background: rgba(0, 110, 255, .08);

      .del-icon {
        visibility: visible;
      }
    }


  }

}
</style>
